<!-- ForgetPassword.vue -->
<template>
	<div class="page-container">
		<div class="form-wrapper">
			<h2 class="title">修改密码</h2>
			<van-form @submit="handleSubmit" :validate-trigger="['onChange', 'onSubmit']">

				<van-field v-model="form.password" type="password" placeholder="请输入新密码" left-icon="lock"
					class="oval-field" :rules="passwordRules" />

				<van-button block type="primary" native-type="submit" class="oval-btn">
					重置密码
				</van-button>
			</van-form>
			<div class="divider-container">
				<div class="divider-line"></div>
				<span class="divider-text" @click="back">返回</span>
				<div class="divider-line"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		showFailToast,
		showToast
	} from 'vant';
	import {
		updatePassword
	} from '@/api/login';
	import {
		getUserid
	} from '@/utils/auth';



	const form = ref({
		userId: getUserid(),
		password: ''
	})
	const passwordRules = [{
		required: true,
		message: '请输入密码'
	}, {
		pattern: /^.{6,8}$/,
		message: '密码需6-8位'
	}];


	const handleSubmit = async () => {
		try {
			const response = await updatePassword(form.value);

			if (response.status === 200) {
				showToast({
					type: 'success',
					message: '修改成功',
					forbidClick: true,
					duration: 1000
				});
				setTimeout(() => {
					window.history.back();
				}, 1000)
			} else {
				showFailToast(response.desc || '修改失败');
			}
		} catch (error) {
			// 处理网络错误
			const errorMsg = error.desc || '修改失败';
			showFailToast(errorMsg);
		}
	}
	const back = () => {
		window.history.back();
	}
</script>

<style lang="scss" scoped>
	.page-container {
		position: fixed;
		width: 100%;

		.divider-container {
			display: flex;
			align-items: center;
			margin-top: 120px;
		}

		.divider-line {
			flex: 1;
			height: 1px;
			background-color: #dcdfe6;
		}

		.divider-text {
			padding: 0 15px;
			color: white;
			font-size: 14px;
			cursor: pointer;
		}

		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		//background: #f8f9fa;
		background: linear-gradient(to bottom, #23a6d5, #23d5ab);

		/* 从上到下的蓝色渐变 */
		.form-wrapper {
			width: 85%;
			max-width: 400px;

			.title {
				text-align: center;
				margin-bottom: 40px;
				color: white;
				font-size: 24px;
			}

			.oval-field {
				display: flex;
				align-items: center;
				margin-bottom: 20px;
				border-radius: 25px;
				background: #fff;
				opacity: .5;

				//box-shadow: 0 3px 10px rgba(58, 123, 213, 0.1);
				:deep(.van-field__left-icon) {
					margin-left: 15px;
					color: #3a7bd5;
				}

				:deep(.van-field__control) {
					//padding: 12px 0;
				}
			}

			.oval-btn {
				margin-top: 30px;
				border-radius: 25px;
				//background: linear-gradient(45deg, #3a7bd5, #00d2ff);
				background-color: #ffffff;
				color: #23a6d5;
				border: none;
			}

			.link-group {
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
				color: #3a7bd5;
				font-size: 14px;

				span {
					cursor: pointer;
					transition: opacity 0.3s;

					&:hover {
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>